<template>
  <div class="payment">
    <div class="top">
      <van-icon name="arrow-left" size="25" @click="onClickLeft"></van-icon>
      <van-icon name="wap-home-o" size="25"></van-icon>
      <div class="text">
        <h2>支付成功</h2>
        <h2><van-count-down :time="time"/></h2>
      </div>
      <!-- <div > -->

      <div class="checked">
        <van-icon name="checked" size="100px" color="#b3dbef"></van-icon>
      </div>
    </div>

    <ul class="infor">
      <li>
        <div>交易编号：</div>
        <!-- <div>{{$route.query.res2.orderid }}</div> -->
        <div>{{ $route.query.orderInfo.orderid }}</div>
      </li>
      <li>
        <div>交易方式：</div>
        <div>微信支付

          <van-icon name="wechat-pay" color="#45a827"></van-icon>
        </div>
      </li>
      <li>
        <div>交易时间：</div>
        <div>{{ $route.query.orderInfo.currenttime }}</div>
      </li>
      <li>
      <van-button @click="toOrderInfo">查看订单详情</van-button>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  data() {
    return {
      time:10000,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home")
    },
    goHome(){
      this.$router.push("/home")
    },
    toOrderInfo(){
      this.$router.push({path:'/Orderdetails',query:{orderid:"630147764005"}})
    }
  },

  watch:{

  }
}
</script>
<style scoped lang="scss">
.payment {
  height: 100vh;
  font-weight: 100vw;
  overflow: hidden;

  .top {
    height: 40vh;
    background: linear-gradient(#cdfebe, #f8f8f8);
    position: relative;

    .text {
      height: 20vh;
      line-height: 20vh;
      width: 100vw;
      text-align: center;

    }

    .checked {
      // background: #b3dbef;
      // height: 50vh;
      // width: 70vw;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 30vh;
      // border-radius: 20px;
    }
  }

  .infor {
    margin-top: 100px;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 20vh;

    li {
      width: 60vw;
      // border-bottom: 2px solid #eee;
      display: flex;
      justify-content: space-between;
    }
  }

}
</style>